<template>
  <div id="searchXp-main">
    <model-title>
        居民详情
    </model-title>
    <el-row>
        <el-col :span="24">居民信息</el-col>
    </el-row>
    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">居民编号</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_id }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">姓名</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{list.user_name}} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">头像</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right">
                    <img :src="list.user_img" style="width:50px;border-radius:50%;margin-top:-20px">
                </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">身份证号</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_cardId }} </div>
            </el-col>
        </el-row>
    </div>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">手机号</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_phone }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">现居地</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_area }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">行政区划</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.xzqh }} </div>
            </el-col>
        </el-row>
    </div>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">居民标签</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right">
                    <little-lable style="margin-left:0">
                        {{ list.lableName }}
                    </little-lable>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">性别</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right">{{ list.user_sex }}</div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">出生日期</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right">{{ list.user_bir }}</div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">籍贯</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right">{{ list.user_native }}</div>
            </el-col>
        </el-row>
    </div>
    
    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">民族</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_nation }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">文化程度</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_culture }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">婚姻状态</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{list.user_marriage  }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">职业</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.workName }} </div>
            </el-col>
        </el-row>
    </div>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">工作单位</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.workArea }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">紧急联系人</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.jjlxr }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">联系人电话</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.jjlxrPhone }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">户籍类型</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.hjlx }} </div>
            </el-col>
        </el-row>
    </div>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">费用类型</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.fylx }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">定点医疗</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.ddyl }} </div>
            </el-col>
        </el-row>
    </div>
    
    <br><br>
    <el-row>
        <el-col :span="24">健康信息</el-col>
    </el-row>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">身高</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.sg }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">体重</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.tz }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">血型</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{list.user_xx  }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">RH阴性</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.user_rhxx }} </div>
            </el-col>
        </el-row>
    </div>

    <div class="search-line">
        <el-row :gutter="20">
            <el-col :span="2">
                <div class="search-txt-left">过敏史</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.gms= list.gms==1?"是":"否" }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">既往史</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.jws= list.jws==1?"是":"否" }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">就诊史</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{list.jzs= list.jzs==1?"是":"否"  }} </div>
            </el-col>
            <el-col :span="2">
                <div class="search-txt-left">家族病史</div>
            </el-col>
            <el-col :span="4">
                <div class="search-txt-right"> {{ list.jzbs= list.jzbs==1?"是":"否" }} </div>
            </el-col>
        </el-row>
    </div>
    <br><br>
    <el-divider class="line"></el-divider>
    <div id="search-footer">
        <el-button type="primary" @click="bjdaxx">编辑档案信息</el-button>
        <el-button type="success" @click="signFn">立即签约</el-button>
        <el-button @click="fanhui">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '@/components/ModelTitle.vue'
import LittleLable from '@/components/lable/LittleLable.vue'
export default {
    created(){
        this.load()
        
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    components: { ModelTitle,LittleLable },
  
    data () {
        return {
            list:{}      
        }
    },
    methods:{
        load(){
            axios({
                url:"/sign/getSignById",
                method:"get",
                params:{
                    id:this.$route.query.id
                }
            }).then(res => {
                this.list = res.data
                this.numToStr()
            })
        },
        numToStr(){
            //行政区划
            if(this.list.xzqh == 1){
                this.list.xzqh = "省级行政区"
            }else if(this.list.xzqh == 2){
                this.list.xzqh = "地级行政区"
            }else if(this.list.xzqh == 3){
                this.list.xzqh = "县级行政区行政区"
            }else if(this.list.xzqh == 4){
                this.list.xzqh = "乡级行政区"
            }
            //性别
            if(this.list.user_sex == 1){
                this.list.user_sex = "男"
            }else if(this.list.user_sex == 2){
                this.list.user_sex = "女"
            }

            //籍贯
            if(this.list.user_native == 1){
                this.list.user_native = "中国"
            }

            //民族
            if(this.list.user_nation == 1){
                this.list.user_nation = "汉族"
            }else{
                this.list.user_nation = "其他"
            }

            //文化程度
            if(this.list.user_culture == 1){
                this.list.user_culture = "小学"
            }else if(this.list.user_culture == 2){
                this.list.user_culture = "初中"
            }else if(this.list.user_culture == 3){
                this.list.user_culture = "高中"
            }else if(this.list.user_culture == 4){
                this.list.user_culture = "大专"
            }else if(this.list.user_culture == 5){
                this.list.user_culture = "本科"
            }else if(this.list.user_culture == 6){
                this.list.user_culture = "研究生"
            }

            //婚姻状态
            if(this.list.user_marriage == 1){
                this.list.user_marriage = "已婚"
            }else{
                this.list.user_marriage = "未婚"
            }

            //费用类型
            if(this.list.fylx == 1){
                this.list.fylx = "自费"
            }else if(this.list.fylx == 2){
                this.list.fylx = "社会医疗保险"
            }else if(this.list.fylx == 3){
                this.list.fylx = "商业保险"
            }else if(this.list.fylx == 4){
                this.list.fylx = "新农合"
            }else if(this.list.fylx == 5){
                this.list.fylx = "其他"
            }

            //血型
            if(this.list.user_xx == 1){
                this.list.user_xx = "A型"
            }else if(this.list.user_xx == 2){
                this.list.user_xx = "B型"
            }else if(this.list.user_xx == 3){
                this.list.user_xx = "O型"
            }else if(this.list.user_xx == 4){
                this.list.user_xx = "AB血型"
            }else if(this.list.user_xx == 5){
                this.list.user_xx = "不详"
            }

            //rh血型
            if(this.list.user_rhxx == 1){
                this.list.user_rhxx = "是"
            }else if(this.list.user_rhxx == 2){
                this.list.user_rhxx = "否"
            }else{
                this.list.user_rhxx = "不详"
            }
        },
        bjdaxx(){
            this.$router.push({
                path:"/perfectPeople",
                query:{
                    id:this.list.user_id
                }
            })
        },
        fanhui(){
            this.$router.back()
        },
        signFn(){
            axios({
                url:"/sign/updateHomeSign",
                method:"get",
                params:{
                    id:this.list.user_id
                }
            }).then(res =>{
                    this.$message({
                    showClose: true,
                    message: '签约成功！！！',
                    type: 'success'
                });
            })
        }
    }
}
</script>

<style>
    #searchXp-main{
        width: 1150px;
        background: white;
        margin: 10px auto;
        box-sizing: border-box;
        padding: 10px;
    }
    .search-line{
        margin-top: 50px;
    }
    .search-txt-left{
        width: 100%;
        font-size: 13px;
        color: gray;
        display: flex;
        justify-content: flex-end;
    }
    .search-txt-right{
        width: 100%;
        font-size: 13px;
        color: rgb(0, 0, 0);
        display: flex;
        justify-content: flex-start;
    }
    .line{
        margin-top: 0px;
        height: 0.5px;
    }
    #search-footer{
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
</style>